<template>
  <div>

    <SelfSwiper v-if="company.photos && company.photos.length" :imgUrls="company.photos" :self_class="'h211'" @swiperChange="swiperChange"></SelfSwiper>

    <!--公司介绍-->
    <div class="pl15 pr15" v-if="company.companyIntroduce">
      <p class="lh45 fs16 c38 fbold">公司介绍</p>

      <div class="bgfff shadow_gray pl15 pt20 pb15 pr15 fs16 bradius5">
        <div v-html="company.companyIntroduce"></div>
      </div>

    </div>


    <!--产品介绍-->
    <div class="pl15 pr15" v-if="company.goodsIntroduce">
      <p class="lh45 fs16 c38 fbold">产品介绍</p>

      <div class="bgfff shadow_gray pl15 pt20 pb15 pr15 fs16 bradius5">
        <div v-html="company.goodsIntroduce"></div>
      </div>

    </div>

    <!--公司视频-->
    <div class="pl15 pr15" v-if="company.companyVideoModelList">
      <p class="lh45 fs16 c38 fbold">企业视频</p>
      <div class="disflex wrap jsbet">
        <!--<div class="bgfff h211 shadow_gray">{{}}</div>-->
        <div v-for="(videoItem, index) in company.companyVideoModelList" :key="index" class="bgfff " :class=" index === 0 ? 'firstVideo' : 'notFirstVideo'">
          <video :id="'myVideo'+ index" class=""
              :title="videoItem.describes"
              :src="videoItem.url"
              objectFit="cover"
              :poster="videoItem.cover"
              enable-danmu
              danmu-btn
              controls
              :autoplay="false"
          ></video>
          <div class="fs14 pl15 c38 fbold">{{videoItem.describes}}</div>
        </div>
      </div>
      <!--src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"-->
      <!--:src="company.videoUrl"-->


    </div>


    <!--企业招聘-->
    <div class="pl15 pr15" v-if="invites.length">
      <p class="lh45 fs16 c38 fbold">企业招聘</p>

      <div class="bgfff pt15 pl16 pr15 pb15 shadow_gray mb10 bradius5"
           @click="page_turn('joinUsDetail' , v.recruitId)"
           v-for="(v,k) in invites"
           :key="k">
        <p class="disflex jsbet fs14">
          <span class="c38 fbold">{{v.position}}</span>
          <span class="cblue fbold">{{v.salary}}</span>
        </p>

        <div class="disflex jsbet fs12 ca8 pt13">
          <div>
            {{v.recruitAddress}} | {{experienceArray[v.experience-1].title}} | {{educatArray[v.education-1].title}}
          </div>
        </div>
      </div>

    </div>

    <!--关于我们-->
    <div class="pl15 pr15">
      <p class="lh45 fs16 c38 fbold">关于我们</p>

      <div class="bgfff pt15 pl16 pr15 pb19 shadow_gray mb10 bradius5" v-if="company.phone">
        <p class="fs12 ca8 ">联系电话</p>

        <div class="disflex jsbet pt15" @click="makePhone">
          <div class="fs14 c38 fbold">{{company.phone}}</div>

          <div class="pl16 left_line disflex column-reverse">
            <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/tel_blue.png" alt=""
                 class="w16 h16">
          </div>

        </div>
      </div>


      <div class="bgfff pt15 pl16 pr15 pb19 shadow_gray mb12 bradius5" v-if="company.address">
        <p class="fs12 ca8">公司地址</p>

        <div class="disflex jsbet pt15">
          <div class="fs14 c38 fbold">{{company.address}}</div>
          <div class="pl16 left_line disflex column-reverse" @click="openAddr">
            <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/addr_2.png" alt=""
                 class="w16 h16">
          </div>
        </div>
      </div>

      <!--联系我们-->
      <div class="bgfff shadow_gray bradius5 pt25 pb25 pl25 pr25">
        <p class="under_line textc fs16 c38 fbold pb27">联系我们</p>

        <input type="text" class="w100p bgf5f6 bradius5 lh39 h39 borderbox  pl10 fs14 ca8 phe8 mb10"
               placeholder="请填写您的姓名" v-model="form.name">
        <input type="text" class="w100p bgf5f6 bradius5 lh39 h39 borderbox  pl10 fs14 ca8 phe8 mb10"
               placeholder="请填写您的联系电话" v-model="form.tel">
        <input type="text" class="w100p bgf5f6 bradius5 lh39 h39 borderbox  pl10 fs14 ca8 phe8 mb15"
               placeholder="请填写您的需求" v-model="form.text">

        <div class="w100p bg_line_blue cfff textc fs18 lh44 bradius5" @click="formConfirm">立即提交</div>
      </div>

    </div>

    <!--bottom-->
    <div class="textc pb15 fs12 ca8 bgf5f6 pt15">- 到底了，看看其他的吧 -</div>


  </div>
</template>

<script>
  import SelfSwiper from '@/components/swiper' //
  import WXAJAX from '../../utils/request'
  import amapFile from '../../libs/amap-wx.js'
  import util from '../../utils/index'
  import { mapGetters } from 'vuex';

  export default {
    name: '',
    components: {SelfSwiper},
    data() {
      return {
        img: 'https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/food.jpg',
        images: [{url: this.img}, {url: this.img}],

        imgUrls: [
          {
            img: this.img,
            url: '/_pages/common/webview/main?url=https://wechat.benmu-health.com/mobile/app/common/material/render/17'
          },
          {
            img: this.img,
            url: '/pages/checkup/filterPackage/index?category=PARENTS_CHECKUP'
          }
        ],
        COMPANYID: 0,
        myAmapFun: '',
        Mc: '',
        form: {
          name: '',
          tel: '',
          text: '',
        },
        company: {
          accuracy: '',//经度
          dimension: '',//维度
        },
        invites: [],
        locat: {
          lat: 30.5702,
          lng: 104.06476
        },
        /*学历*/
        educatArray:[
          {title:'全部',id:1},
          {title:'初中及以下',id:2},
          {title:'中专/中技',id:3},
          {title:'高中',id:4},
          {title:'大专',id:5},
          {title:'本科',id:6},
          {title:'硕士',id:7},
          {title:'博士',id:8}
        ],
        /*经验*/
        experienceArray:[
          {title:'应届生',id:1},
          {title:'1年以内',id:2},
          {title:'1-3年',id:3},
          {title:'3-5年',id:4},
          {title:'5-10年',id:5},
          {title:'10年以上',id:6},
          {title:'全部',id:7},
        ],
        videoContext: null
      }
    },
    onShow() {
      wx.setNavigationBarTitle({
        title: '官网'
      });
      this.invites = [];
      let lastCompanyid = this.COMPANYID;
      this.Mc = wx.createMapContext('map');
      this.myAmapFun = new amapFile.AMapWX({key: 'e11026819b6d300fda6a2c680fbd2fef'});
      //获取当前的公司
      this.COMPANYID = wx.getStorageSync('COMPANYID') || 1;
      //获取官网信息
      if (lastCompanyid != this.COMPANYID || !this.COMPANYID) {
        this.inits();
        // this.getInvite();
      }

      //获取官网招聘信息
      //this.getInvite();
    },
    mounted() {
    },
    async onPullDownRefresh(){
      await this.inits();
      //获取官网招聘信息
      await this.getInvite();
      wx.stopPullDownRefresh();
    },
    methods: {
      async inits() {//获取官网信息
        return new Promise((resolve, reject) => {
          let v = this;
          wx.showLoading();
          WXAJAX.POST({
            companyId: v.COMPANYID,
            cardId: wx.getStorageSync('CARDID'),
          }, '', '/personal/getWebsiteInfo').then((data) => {
            if (data) {
              if (data.photos) {
                data.photos = data.photos.split(',');
              } else {
                data.photos = [];
              }
              v.company = data;
              data.recruitModelList.forEach(function (i, k) {
                i.salary = i.minSalary / 100000 + 'k - ' + i.maxSalary / 100000 + 'k';
              });
              v.invites = data.recruitModelList ? data.recruitModelList : [] ;
            }
            setTimeout(function () {
              v.$nextTick(function () {
                v.videoContext = wx.createVideoContext('myVideo0');
                v.videoContext.stop();
              });
            }, 2000);
            wx.hideLoading();
          }).catch((err) => {
            console.log(err)
            wx.hideLoading();
          }).finally(()=>{
            resolve();
          })
        })
      },
      async getInvite() {
        return new Promise((resolve, reject) => {
          let v = this;
          wx.showLoading();
          WXAJAX.POST({
            companyId: v.COMPANYID,
          }, '', '/personal/getCompanyRecruit').then((data) => {
            data.forEach(function (i, k) {
              i.salary = i.minSalary / 100000 + 'k - ' + i.maxSalary / 100000 + 'k';
            });
            v.invites = data;
            wx.hideLoading();
          }).catch((err) => {
            wx.hideLoading();
          }).finally(()=>{
            resolve()
          })
        })
      },
      //轮播图的切换事件
      swiperChange(current) {
        // console.log(current)
      },
      page_turn(url, recruitId) {
        wx.navigateTo({url: '../' + url + '/main?recruitId=' + recruitId})
      },
      openAddr() {
        /* wx.openLocation({
             latitude :  Number(116.397428),/!*this.company.accuracy ||*!/
             longitude :  Number(39.90923),/!*this.company.dimension ||*!/
             scale: 18 ,
             name : this.company.address,
         })*/
        let v = this;
        wx.getLocation({
          type: 'gcj02', // 返回可以用于wx.openLocation的经纬度
          success(res) {
            res = v.locat;
            const latitude = res.lat;
            const longitude = res.lng;
            wx.openLocation({
              latitude,
              longitude,
              scale: 18
            })
          }
        })
      },
      formConfirm() {//表单提交
        if (!this.form.name) {
          wx.showToast({
            title: '请输入您的姓名！',
            icon: 'none'
          });
          return
        }
        if (!this.form.tel || !util.checkPhone(this.form.tel)) {
          wx.showToast({
            title: '请输入正确的电话！',
            icon: 'none'
          });
          return
        }
        let v = this;
        wx.showLoading();
        WXAJAX.POST({
          companyId: v.COMPANYID,
          name: v.form.name,
          phone: v.form.tel,
          text: v.form.text,
          cardId: wx.getStorageSync('CARDID'),
        }, '', '/personal/addDemand').then((data) => {
          wx.hideLoading();
          if (data) {
            v.form = {
              name: '',
              tel: '',
              text: '',
            };
            wx.showToast({
              title: '提交成功！',
              icon: 'success'
            });
          }

        }).catch((err) => {
          wx.hideLoading();
        })
      },
      makePhone() {//拨打电话
        util.MakePhone(String(this.company.phone));
      },
    },
    computed:{
      ...mapGetters(['currentCompany']),
    },
  }
</script>

<style>
  .left_line {
    position: relative;
    padding-left: 18px;
  }

  .left_line::before {
    content: '';
    position: absolute;
    left: 0;
    width: 0.5px;
    height: 13px;
    background: #A8A8A8;
    bottom: 2px;
  }

  .under_line {
    position: relative;
  }

  .under_line::before {
    content: '';
    position: absolute;
    bottom: 15px;
    width: 25px;
    height: 2px;
    background: #51CDCB;
    left: 0;
    right: 0;
    margin: auto;
  }

  video {
    width: 100%;
    height: 194px;
    border-radius: 5px 5px 0 0;
  }
  .firstVideo{
    width: 100%;
    border-radius: 5px 5px 0 0;
  }
  .firstVideo div{ 
    line-height: 42px;
  }
  .notFirstVideo{
    width: 168px;
    margin-top: 10px;
    border-radius: 5px 5px 0 0;
  }
  .notFirstVideo video{
    height: 94px;
  }
  .notFirstVideo div{
    line-height: 24px;
  }
</style>



















